<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem aut eaque expedita, veritatis reiciendis aliquam commodi. Reprehenderit delectus aliquam, veniam non optio aperiam, rerum ex, obcaecati eveniet commodi veritatis deleniti?</p>
		<div style="width: 100px; height: 100px; background: #000;"></div>
		<span>文本</span>
		<br>
		<input type="button" value="按钮2">
		<input type="text">
		<script>
			/*   javaScript:基础语法+* DOM（页面）+BOM(浏览器)
			     JQuery操作DOM方式【7方式，36个函数】--改变页面效果
				 1.元素内容操作：操作元素和元素内容的方式【3个函数】
				 .html()
				 .val()
				 .text()
				 2.元素属性操作：操作元素的属性【固定属性、附加属性】【4个函数】
				  attr()
				  removeAttr()
				  prop()
				  removeProp()
				 3.元素类名操作：操作css类样式【4个函数】
				 addClass()
				 removeClass()
				 toggleClass()
				 hasClass()
				 4.元素样式【尺寸】操作：【5个函数】
				 css()
				 width()和height()
				 outerWidth()和outerHeight()
				 5.元素删除和插入操作：【7个函数】
				 append()   prepend() 
				  after()    before()
				  remove()    empty()
				   replaceWith()
			     6.元素遍历操作：【6个函数】
				 7.动画操作：【7个函数】
			*/
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出效果");
			});
			
			$("div").mouseenter(function(){
				$("span").html("<a href='#'>超文本</a>");
			});
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数  ：增加一个元素，覆盖原来的html
			.val()函数   ：input元素使用，修改表单元素中文本
			*/
			$('button').click(function(){
				// DOM操作---改变页面其他元素
				// DOM操作--改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯......</marquee>");
			});
			/*  练习：100*100框，div 鼠标移动上去，文本改成 超文本
			        按钮和输入框，点击按钮，输入框输出文字效果
			
			*/
		</script>
	</body>
</html>